import {Suspense} from "react" // 路由渲染出前得loding
import { Route, Switch, NavLink, Link, Redirect} from 'react-router-dom' // 快捷键imbrc、
let RouterView = (props)=>{
    console.log(props)
    let {RoutterList} = props;
    // console.log(RouterList,11111111)
    // fitter 是过滤，满足数组里条件符合得每一项，并把它赋给一个新数组，需要return
    // map  是便利数组得每一项，把每一项变成需要得结果，并且生成一个新的数组
    let routerList = RoutterList.filter((item,index)=>{ // 非重定向的
        return !item.to
    })
    let rederict = RoutterList.filter((item,index)=>{ // 重定向的
        return item.to
    })[0]
     return (
         <Suspense fallback={<div>...加载中</div>}>
             <Switch>
                 {
                     routerList&&routerList.length?routerList.map((item,index)=>{
                         return <Route path={item.path} render={(rouerProps)=>{ //路由信息对象
                                console.log(rouerProps)
                                return <item.component {...rouerProps} ></item.component>
                         }} key={index}></Route>
                     }):"暂无路由"
                 }
                 {
                     rederict?<Redirect to={rederict.to} from={rederict.from}></Redirect>:"暂无重定向"
                 }
             </Switch>
         </Suspense>
     )
}
export default RouterView